<div class="page-group" id="class">
    <link rel="stylesheet" href="./css/class.css">
    <div class="page">
        <!-- 顶部搜索框 -->
        <header class="bar bar-nav header home-header">
            <div>
                <span class="icon icon-search" for="search"></span>
                <div class="Search">
                    <input type="text" placeholder="搜索" class="searchs open-panel" data-panel='#panel-js-demo'>
                </div>
                <span class="icon icon-code open-panel " data-panel='#panel-code'></span>
            </div>
            <a href="#"><span class="icon icon-message"></span></a>
        </header>
        <script>
            $(function () {
                $(document).on("click", ".searchs", function () {
                    $.openPanel("#panel-js-demo");
                });

            })
        </script>
        <nav class="bar bar-tab nav-bottom">
            <a class="tab-item " href="./index.html">
                <span class="icon icon_home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item active" href="#">
                <span class="icon icon_class"></span>
                <span class="tab-label">分类</span>
            </a>
            <a class="tab-item " href="./shop.html">
                <span class="icon icon_shop"></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item">
                <span class="icon icon_mine"></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
        <div class="content infinite-scroll-bottom  infinite-scroll" data-distance="100">
            <!-- 十六中分类 -->
            <div class="class-sort">
                <ul>
                </ul>
            </div>
            <script>
                $(function () {
                    $.ajax({
                        url: './data/classify.json',
                        success: function (data) {
                            var arr = data.model
                            // console.log(arr)
                            var str = ''
                            $(arr).each(function (index, item) {
                                str += `
                                            <li>
                                                <img src="${item.image}">    
                                                <p>${item.title}</p>
                                            </li>
                                        `
                            })
                            $('.class-sort').html(str)
                        }
                    })
                })
            </script>

            <!-- 三个标签页 -->
            <div>
                <div class="buttons-tab fixed-tab" data-offset="35">
                    <a href="#tab1" class="tab-link active button">流行</a>
                    <a href="#tab2" class="tab-link button">热销</a>
                    <a href="#tab3" class="tab-link button">上新</a>
                </div>
                <script>
                    $(function () {
                        $(document).on("pageInit", function () {
                            $('.buttons-tab').fixedTab({ offset: 44 });
                        });



                    })
                </script>
                <div class="tabs">
                    <div id="tab1" class="tab active">
                        <div class="content-block cot1 cot">

                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader">
                            <div class="preloader"></div>
                        </div>
                    </div>
                    <div id="tab2" class="tab">
                        <div class="content-block cot2 cot">

                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader">
                            <div class="preloader"></div>
                        </div>
                    </div>
                    <div id="tab3" class="tab">
                        <div class="content-block cot3 cot">

                        </div>
                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader">
                            <div class="preloader"></div>
                        </div>
                    </div>
                </div>
                <!-- 流行 -->
                <!-- 热销 -->
                <!-- 上新 -->
                <script>
                    $(function () {
                        // 加载flag
                        var loading = false;
                        // 最多可加载的条目
                        var maxItems = 30;
                        // 每次加载添加多少条目
                        var itemsPerLoad = 10;
                        function addItems(number, lastIndex) {
                            // 生成新条目的HTML
                            $.ajax({
                                url: './data/fashion.json',
                                success: function (data) {
                                    // console.log(data)
                                    var arr = data.model
                                    // console.log(arr)
                                    var str = ''
                                    for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                                        $(arr[i]).each(function (index, item) {
                                            str += `
                                                            <a href="${item.link}">
                                                                <div><img src="${item.showLarge.img}" class="bigimg"></div>
                                                                <p class="goods-msg">
                                                                `
                                            $(arr[i].props).each(function (index, item) {
                                                str += `<span>${item}</span>`
                                            })
                                            str +=
                                                `</p>
                                                                <p class="goods-bottom">
                                                                    <span class="goods-price">￥${item.price}</span>
                                                                    <span class="goods-star">${item.cfav}<img src="./tabBarImg/星星.png"></span>
                                                                </p>
                                                            </a>
                                                        `
                                        })
                                    }
                                    // 添加新条目
                                    $('.cot1').append(str)
                                }
                            })
                            $.ajax({
                                url: './data/sell.json',
                                success: function (data) {
                                    // console.log(data)
                                    var arr = data.model
                                    // console.log(arr)
                                    var str = ''
                                    for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                                        $(arr[i]).each(function (index, item) {
                                            str += `
                                                            <a href="${item.link}">
                                                                <div><img src="${item.showLarge.img}" class="bigimg"></div>
                                                                <p class="goods-msg">
                                                                `
                                            $(arr[i].props).each(function (index, item) {
                                                str += `<span>${item}</span>`
                                            })
                                            str +=
                                                `</p>
                                                                <p class="goods-bottom">
                                                                    <span class="goods-price">￥${item.price}</span>
                                                                    <span class="goods-star">${item.cfav}<img src="./tabBarImg/星星.png"></span>
                                                                </p>
                                                            </a>
                                                        `
                                        })
                                    }
                                    // 添加新条目
                                    $('.cot2').append(str)
                                }
                            })
                            $.ajax({
                                url: './data/update.json',
                                success: function (data) {
                                    // console.log(data)
                                    var arr = data.model
                                    // console.log(arr)
                                    var str = ''
                                    for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                                        $(arr[i]).each(function (index, item) {
                                            str += `
                                                            <a href="${item.link}">
                                                                <div><img src="${item.showLarge.img}" class="bigimg"></div>
                                                                <p class="goods-msg">
                                                                `
                                            $(arr[i].props).each(function (index, item) {
                                                str += `<span>${item}</span>`
                                            })
                                            str +=
                                                `</p>
                                                                <p class="goods-bottom">
                                                                    <span class="goods-price">￥${item.price}</span>
                                                                    <span class="goods-star">${item.cfav}<img src="./tabBarImg/星星.png"></span>
                                                                </p>
                                                            </a>
                                                        `
                                        })
                                    }
                                    // 添加新条目
                                    $('.cot3').append(str)
                                }
                            })
                        }
                        //预先加载20条
                        addItems(itemsPerLoad, 0);
                        // 上次加载的序号
                        var lastIndex = 10;
                        // 注册'infinite'事件处理函数
                        $(document).on('infinite', '.infinite-scroll-bottom', function () {
                            // 如果正在加载，则退出
                            if (loading) return;
                            // 设置flag
                            loading = true;
                            // 模拟1s的加载过程
                            setTimeout(function () {
                                // 重置加载flag
                                loading = false;
                                if (lastIndex >= maxItems) {
                                    // 加载完毕，则注销无限加载事件，以防不必要的加载
                                    $.detachInfiniteScroll($('.infinite-scroll-bottom'));
                                    // 删除加载提示符
                                    $('.infinite-scroll-preloader').remove();
                                    return;
                                }
                                // 添加新条目
                                addItems(itemsPerLoad, lastIndex);
                                // 更新最后加载的序号
                                lastIndex = $('.cot1 a').length + 10;

                                //容器发生改变,如果是js滚动，需要刷新滚动
                                $.refreshScroller();
                            }, 1000);
                        });
                    })

                </script>
            </div>


        </div>

        <!-- 搜索框侧边框 -->
        <div class="panel panel-right panel-cover" id='panel-js-demo'>
            <header class="bar bar-nav header header-right">
                <div>
                    <span class="icon icon-search" for="search"></span>
                    <input type="text" placeholder="搜索" class="search open-panel" data-panel='#panel-right'>
                    <span class="icon icon-code open-panel " data-panel='#panel-code'></span>
                </div>
                <a href="#"><span class="cancel close-panel">取消</span></a>
            </header>
            <div class="content-block hot-clock" style="margin: 0">
                <div class="right-hot">
                    <p><img src="./tabBarImg/hot.png" alt="">热门搜索</p>
                    <ul>
                        <li>卫衣</li>
                        <li>外衣</li>
                        <li>毛衣</li>
                        <li>睡衣</li>
                        <li>风衣</li>
                        <li>衬衫</li>
                        <li>马甲</li>
                        <li>口红</li>
                        <li>牛仔裤</li>
                        <li>鞋子</li>
                    </ul>
                </div>
                <div class="right-clock">
                    <p><img src="./tabBarImg/记录.png" alt="">清除记录<span style="text-align: right">清除搜索记录</span></p>
                    <ul>
                        <li>
                            鞋子
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 二维码侧边框 -->
        <div class="panel panel-right panel-cover" id='panel-code'>
            <div class="bar bar-nav code-header">
                <p>
                    <img src="./tabBarImg/返回.png" alt="" class="fanhui">
                    <span>二维码</span>
                    <span class="code-right">相册</span>
                </p>
            </div>
            <div class="code-content">

            </div>
        </div>
        <script>
            $(function () {
                $(document).on("click", ".fanhui", function () {
                    $.closePanel('#panel-code')
                });
            })
        </script>

        <div class="goTop">Top</div>
        <script>
            $(function () {
                $('.content').on('scroll', function () {
                    if ($(this).scrollTop() > 450) {
                        $('.goTop').show()
                    } else {
                        $('.goTop').hide()
                    }
                })
                $('.goTop').on('click', function () {
                    $('.content').scrollTop(0)
                })


                $('.icon-message').click(function () {
                    console.log('111')
                    $.popup('.popup-about');
                })
                $('.icon_mine').click(function(){
                    $.popup('.popup-about');
                })
            })


        </script>
    </div>
</div>